<template>
      <div class="content-box">
        <div class="serchBox clearfix">
            <div class="u_mb_10">
                <el-button type="primary" @click="addConsult()">新增咨询服务</el-button>
            </div>
            <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search" @reset="reset">
                <!-- <template #buttons="{ model , formRef }">
                        <el-button type="primary" @click="search(model,formRef)">搜索</el-button>
                        <el-button  @click="reset(model,formRef)">重置</el-button>
                </template> -->
            </easyForm>
        </div>
        <div class="containerBox">
            <el-table :data="tableData" border :header-cell-style="{background:'#eef1f6',color:'#606266'}" >
                <el-table-column
                    align="center"
                    :prop="item.name"
                    :label="item.label"
                    v-for="(item, index) in tableHeader"
                    :key="index"
                    :fixed="item.fixed"
                    :width="item.width"
                    :type="item.type"
                    :min-width="item.minWidth"
                >
                    
                    <!-- 显示状态列重构 -->
                    <template #default="scope" v-if="item.shouState">
                        <div style="display: flex; align-items: center" >
                            <el-switch v-model="scope.row.shouState" class="marginauto" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" fixed="right" align="center">
                    <template #default="scope">
                        <el-button size="small" link type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button size="small" link type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page_box">
                <v-pagination :pagesize="query.limit"
                    :total="pageTotal"
                    :options="query"
                    :render="getData">
	            </v-pagination>
            </div>
        </div>
      </div>
</template>

<script lang="ts" setup>
import { ref , reactive} from 'vue'
import { ElButton, ElMessage, ElMessageBox, ElSwitch, ElTable, ElTableColumn, FormInstance } from 'element-plus'
import easyForm from '@/components/formItem/index.vue'
import vPagination from '@/components/pagenation/index.vue'
import { Module } from 'vuex';
import { useRouter } from 'vue-router';
import {useStore} from "vuex";

const store = useStore();
const router = useRouter();

const formList = {
    base: [
        { label: '', field: 'date',placeholder: '服务名称/咨询师姓名' },
        { label: '', field: 'Id', placeholder: '服务名称ID' },
        { label: '', field: 'type', type:"select",placeholder: '咨询方式',
            options: { data: [
            { label: '视频咨询', value: 1 }, 
            { label: '语音咨询', value: 2 },
            { label: '面对面', value: 3 }] } },
        { label: '', field: 'style', type:"select",placeholder: '是否限购',
            options: { data: [
            { label: '是', value: 1 },
            { label: '否', value: 2 }, ] } },
        { label: '', field: 'from', type:"select",placeholder: '是否更换咨询师',
            options: { data: [
            { label: '是', value: 1 }, 
            { label: '否', value: 2 }, ] } },
        { label: '', field: 'countState', type:"select",placeholder: '是否可退款',
            options: { data: [
            { label: '是', value: 1 },
            { label: '否', value: 2 }, ] } },
        { label: '', field: 'danger', type:"select",placeholder: '面向人群',
            options: { data: [
            { label: '所有人', value: 1 },
            { label: 'B端企业员工', value: 2 }] } },
        { label: '', field: 'countState', type:"select",placeholder: '是否显示',
            options: { data: [
            { label: '是', value: 1 },
            { label: '否', value: 2 }, ] } },

    ],
}
const fieldList: Form.FieldItem[] = formList.base;

const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '搜索',
    resetButtonText: '重置',
    showResetButton: true,
    showSubmitButton:true,
};
// 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        inlineFlag: true,
        size:'small',
        count: '',
        content: '',
        date:''
    })
// 表格内容
let tableLayout = ref('fixed')
let tableHeader = [
    {
        label:"服务ID",
        width: 100,
        name:"name"
    },
    {
        label:"咨询服务名称",
        width: 120,
        name:"name"
    },
    {
        label:"单次咨询时长（分）",
        width: 200,
        name:"time"
    },
    {
        label:"咨询价格（元）",
        name:"content",
        width: 200
    },
    {
        label:"咨询次数",
        name:"content",
        minWidth: 120
    },
    {
        label:"限购次数",
        name:"content",
        width: 120
    },
    {
        label:"咨询方式",
        name:"content",
        minWidth: 120
    },
    {
        label:"是否可退款",
        name:"content",
        width: 120
    },
    {
        label:"关联咨询师",
        name:"content",
        minWidth: 200
    },
    {
        label:"显示状态",
        name:"content",
        minWidth: 130,
        shouState: true
    },
]
 ;
let tableData = [{
        name: '张三',
        time: '2022-12-01 14:56:28',
        content: '登录系统',
        shouState: false,
        id:1

      }, {
        name: '李四',
        content: '编辑用户xxx的信息',
        time: '2022-12-12 09:22:32',
        shouState: true,
        id:2
      }, {
        name: '王五',
        content: '修改咨询订单122222222',
        time: '2022-11-20 11:23:45',
        shouState: false,
        id:3
      }, {
        name: '赵六',
        content: '登录系统',
        time: '2022-12-01 14:56:28',
        shouState: true,
        id:4
      }]
// 分页数据
const  pageTotal = ref(6),//总条数
    query = reactive({//配置对应的查询参数
        appTimeStart:'',
        appTimeEnd:'',
        page: 1,
        limit:10,//page第几页,limit是一页几个
    });
// 搜索按钮
let search = (searchCon: any,formRef: any) => {
    console.log(searchCon)
    console.log(formRef)
}
// 重置按钮
const reset = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// 新增
const addConsult = () => {
    router.push( 'addConsult' );
    let tagsItem = {
        "component": () => import("@/views/dataMana/addConsult.vue"),
            "path": "/addConsult",
            "name":"addConsult",
            "meta":{
                "icon": "Monitor",
                "name": "新增咨询服务",
            },
    }
    store.dispatch("ADD_TAG", tagsItem)
}
const handleEdit = (index: number, row: any) => {
  console.log(index, row)
  let tagsItem = {
        "component": () => import("@/views/dataMana/addConsult.vue"),
            "path": "/addConsult",
            "name":"addConsult",
            "meta":{
                "icon": "Monitor",
                "name": "修改咨询服务",
                "id":row.id
            },
    }
    router.push( {name:'addConsult', query: {id:row.id}} );
    store.dispatch("ADD_TAG", tagsItem)
}
const handleDelete = (index: number, row: any) => {
    ElMessageBox.confirm(
    '确定要删除该咨询服务吗？<br/>如仅需暂时下架该咨询服务，可在咨询服务列表中隐藏对应咨询服务。',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      
    })
}
// 获取详情
const getData = () => {

}
</script>
<style scoped lang="scss">
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    // padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;

}
</style>